<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head
        th:replace="inc/common_header :: common_header(~{::title},~{::link},~{},~{})">
    <title>中国柯桥轻纺同城首页</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
    ></script>
    <link rel="stylesheet" th:href="@{/css/homeindex.min.css}">
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<!--轮播区-->
<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div>
            <img class="carouselimg" th:src="@{/images/banners/banner1.png}"/>
        </div>
    </div>
</div>
<div class="classes">
    <a th:href="@{/product/productindex}">
        <div class="information" style="background-color: #FCD260">
            <div class="text">
                <span>轻纺产品</span>
            </div>
        </div>
    </a>

    <a th:href="@{/study/studyarticlelist}">
        <div class="information" style="background-color: #c24a52">
            <div class="text">
                <span>学习充电</span>
            </div>
        </div>
    </a>

    <a th:href="@{/transport/transportindex}">
        <div class="information" style="background-color: #574a55">
            <div class="text">
                <span>物流运输</span>
            </div>
        </div>
    </a>

    <a th:href="@{/factory/factoryindex}">
        <div class="information" style="background-color: #6b94b8">
            <div class="text">
                <span>加工整理</span>
            </div>
        </div>
    </a>
</div>
<!--海报区-->
<div class="banner">
    <img th:src="@{/images/banners/banner2.png}" alt=""/>
</div>
<!--产品列表区-->
<div class="productlist">
    <div class="column">
        <div class="title">
            热门推荐
        </div>
        <a th:href="@{/product/productindex}">
            <div class="more">
                查看更多
                <i class="layui-icon layui-icon-right" style="color:#a9a9a9"></i>
            </div>
        </a>

    </div>
    <div class="list">

        <div class="productbox" th:each="article : ${productarticles}">
            <a th:href="@{/mywechat/articledetail(id=${article.id})}">
                <div class="productimg">
                    <img th:src="${article.images.split('\|_\|')[0]}">
                </div>
                <div class="producttitle" th:text="${article.title}">
                </div>
            </a>

        </div>

        <div class="productbox" th:if="${productarticles.size() %3 ==1}">
            <div class="blank">

            </div>
        </div>

        <div class="productbox" th:if="${productarticles.size() %3 ==1}">
            <div class="blank">

            </div>
        </div>

        <div class="productbox" th:if="${productarticles.size() %3 ==2}">
            <div class="blank">

            </div>

        </div>
    </div>

</div>


<div class="banner">
    <img th:src="@{/images/banners/banner3.png}" alt=""/>
</div>
<!--每日小知识推荐区-->
<div class="recommondarticles">
    <div class="column">
        <div class="title">
            每日小知识
        </div>
        <a th:href="@{/study/studyarticlelist}">
            <div class="more">
                查看更多
                <i class="layui-icon layui-icon-right" style="color:#a9a9a9"></i>
            </div>
        </a>

    </div>
    <div class="articlelist">
        <div class="article" th:each="article : ${studyarticles}" th:if="${studyarticles!=null}">
            <a th:href="@{/mywechat/studyarticledetail(id=${article.id})}">
                <div class="articletitle" th:text="${article.title}">
                </div>
                <div class="author">
                    作者:<span th:text="${article.loginName}"></span>
                </div>
                <div class="articlecontent" th:utext="${article.content}">
                </div>
            </a>
        </div>


    </div>
</div>

<div class="banner">
    <img th:src="@{/images/banners/banner4.png}" alt=""/>
</div>
<div class="transport">
    <div class="column">
        <div class="title">热门物流线路</div>
        <a href="">
            <div class="more">
                查看更多
                <i class="layui-icon layui-icon-right" style="color: #a9a9a9"></i>
            </div>
        </a>
    </div>
    <div class="list">
        <a href="">
            <div class="transport-item">
                <div class="origin">柯桥</div>
                <div class="truck">
                    至
                </div>
                <div class="origin">杭州</div>
            </div>
        </a>
        <a href="">
            <div class="transport-item">
                <div class="origin">柯桥</div>
                <div class="truck">
                    至
                </div>
                <div class="origin">杭州</div>
            </div>
        </a>
        <a href="">
            <div class="transport-item">
                <div class="origin">柯桥</div>
                <div class="truck">
                    至
                </div>
                <div class="origin">杭州</div>
            </div>
        </a>
        <a href="">
            <div class="transport-item">
                <div class="origin">柯桥</div>
                <div class="truck">
                   至
                </div>
                <div class="origin">杭州</div>
            </div>
        </a>


    </div>
</div>

<div class="banner">
    <img th:src="@{/images/banners/banner5.png}" alt=""/>
</div>
<div class="factory">
    <div class="column">
        <div class="title">热门加工厂</div>
        <a href="">
            <div class="more">
                查看更多
                <i class="layui-icon layui-icon-right" style="color: #a9a9a9"></i>
            </div>
        </a>
    </div>
    <div class="list">
        <a href="">
            <div class="factory-item">
                <div class="left">
                    <img th:src="@{/images/33.jpg}" alt="">
                </div>
                <div class="right">
                    <div class="title">
                        欣欣涂层厂
                    </div>
                    <div class="detail">
                        做PU PA 防水 三防涂层 欢迎来样加工
                        韩囧红加厚行数超速姜思达萨达
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

<div th:replace="inc/common_infooter :: common_infooter"></div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '4rem'
            , arrow: 'hover' //始终显示箭头
            , indicator: 'none'

            //,anim: 'updown' //切换动画方式
        });
    });
</script>


</body>
</html>